<template>
	<view id="teachers">
		<mescroll-uni :down="downOption" @down="downCallback" :up="upOption">
			<!-- 师资列表 -->
			<navigator v-for="(item,index) in teacherList" :key="index" class="margin solid radius flex padding-tb-sm padding-left-sm single"
			:url="'/pages/teacherInfo/teacherInfo?teacherId='+item.id" style="margin-top:100upx;">
				<image class="radius cover" :src="item.avatar==null||item.avatar==''?'/static/image/errorImg.svg':item.avatar"
				 :lazy-load="true" mode="aspectFill" :id="index" @error="imgError" style="min-width:260upx;min-height:260upx;top:16upx;box-shadow: 0 6upx 20upx rgba(0,0,0,.1);"></image>
				
				<view class="grid col-1">
					
					<view class="padding-left-sm text-lg flex align-center">
						<text class="padding-right-sm">{{item.teacher_name}}</text>
						<my-tag :tag="item.level"></my-tag>
					</view>
					
					<view class="padding-tb-sm padding-left-sm solid-bottom">
						<text>{{item.age}}岁</text>
						<text class="padding-lr-sm" style="color:#666;">{{!item.gender?'未知性别':item.gender}}</text>
						<text style="color:#666;" v-if="item.teacher_age">{{item.teacher_age}}年</text>
						<text style="color:#666;" v-else>未知教龄</text>
					</view>
					<view class="text-right text-orange text-sm padding-top-sm padding-right">详细资料</view>
				</view> 
			</navigator>
		</mescroll-uni>
	</view>
</template>
 
<script>
	import myTag from '@/components/my-tag.vue';	//自定义标签组件
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";	//下拉刷新上拉加载组件
	import {mapState} from 'vuex'
	
	export default {
		components: {
			myTag,
			MescrollUni
		},
		data() {
			return {
				downOption: {
					auto: false, //是否在初始化后,自动执行下拉回调callback; 默认true
				},
				upOption:{
					use: false,
					empty:{
						tip: '~ 空空如也 ~', // 提示
						icon: '/static/image/queshengtu.svg'
					}
				},
			}
		},
		onLoad() { 
			// 教师列表
			this.teachers()
		},
		methods: {
			/*下拉刷新的回调 */
			async downCallback(mescroll) {
				console.log('下拉刷新了', mescroll);
				
				let res = await this.$api.teachers()
				if(res.statusCode === 200){
					mescroll.endSuccess()
					
					console.log('教师列表', res.data.data)
					
					this.$store.dispatch('sendTeachers', res.data.data)
				}
				
				// 第2种: 下拉刷新和上拉加载调同样的接口,直接用mescroll.resetUpScroll()代替
				// mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			// 教师列表
			async teachers(){
				uni.showNavigationBarLoading()
				
				let res = await this.$api.teachers()
				if(res.statusCode === 200){
					uni.hideNavigationBarLoading()
					
					console.log('教师列表', res.data.data)
					
					this.$store.dispatch('sendTeachers', res.data.data)
				}
			},
			// 图片加载失败
			imgError: function (e) {
				let errorImgIndex = e.currentTarget.id
				this.$store.state.coursesList[errorImgIndex].image = '/static/image/errorImg.svg'
			}
		},
		computed: {
			...mapState(['teacherList'])
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $uni-bg-color;
	}
	#teachers{
		.single{
			box-shadow:0 12upx 40upx rgba(0,0,0,0.05);
			margin-bottom: 110upx;
			.cover{
				position: relative;
				z-index: 1;
				width:240upx;
				height:240upx;
				margin-top: -100upx;
			}
		}
		.icondefault{
			font-size: 300upx;
		}
		.mescroll-downwarp{
			top: -105%;
		}
	}
</style>